<template>
	<div class="policies bg">
		<goback title="相关政策"></goback>
		<div class="card" >
			
			<div class="card_title">政策清单</div>
			
			<div class="transparent">
				<swiper :options="swiperOptions" ref="mySwiper">
					<swiper-slide v-for="(item, index) in images" :key="item.src"  >
						<img :src="require(`@/assets/images/${item.src}`)" alt="轮播图" @click="navigateTo(item.link)" />
					</swiper-slide>
					<div slot="pagination" class="swiper-pagination"></div>
				</swiper>
			</div>
			<ul class="TopNav">
				<li  v-for="(item,index) in tabBar" @click="changeSwiper(index)" :class="{ 'select': activePage === index }">
					{{item}}
				</li>
			</ul>
			
			<swiper class="swiper-container" @slideChange="onSlideChange" ref="mySwiper">
				<swiper-slide class="swiper-slide" v-for="(item,index) in tabBar" :key="index" >
					<div class="swiper_slide_everycon" v-for="(page,index2) in pages" v-if="page.type==index">
						<a :href="page.url" target="_blank" style="color: #fff;">{{page.title}}</a>
					</div>
				</swiper-slide>
			</swiper>
				
		</div>
		<copyright></copyright>
	</div>
</template>

<script>
	export default {
		name: "policies",
		data() {
			return {
				swiperOptions: {
					speed: 3000, //匀速时间
					slidesPerView: 1,
					loop: true,
					autoplay: {
						delay: 500,
						disableOnInteraction: true,
						shadow: true,
						slideShadows: true,
						shadowOffset: 20,
						shadowScale: 0.98
					},
				
				},
				images: [{
						src: '政策1.jpg',
						link:'https://www.moa.gov.cn/'
					},
					{
						src: '政策2.jpg',
						link:'https://www.gov.cn/'
					},
					{
						src: '政策3.jpg',
						link:'https://www.zj.gov.cn/'
					},
					// 更多图片...
				],
				tabBar: [
					'中央政策','省政府政策','地级市政策'
				],
				pages: [{
					title: '农业农村部办公厅关于做好2023年农作物秸秆综合利用工作的通知',
					type: 0,
					url:'https://www.gov.cn/zhengce/zhengceku/202306/content_6885403.htm',
					passages: ['第一段', '第二段']
				}, {
					title: '“十四五”循环经济发展规划：到2025年农作物秸秆综合利用率保持在86%以上',
					type: 0,
					url:'https://www.ndrc.gov.cn/xwdt/ztzl/sswxhjjfzgh/202107/t20210714_1290425.html',
					passages: ['第一段', '第二段']
				}, {
					title: '关于印发《秸秆综合利用技术目录（2021）》的通知',
					type: 0,
					url:'https://www.ndrc.gov.cn/fggz/hjyzy/zyzhlyhxhjj/202110/t20211029_1314925.html',
					passages: ['第一段', '第二段']
				}, {
					title: '农业农村部部署2023年秸秆综合利用工作',
					type: 0,
					url:'http://www.kjs.moa.gov.cn/hbny/202306/t20230601_6429174.htm',
					passages: ['第一段', '第二段']
				}, {
					title: '浙江省人民政府办公厅关于高质量推进农作物秸秆综合利用的实施意见',
					type: 1,
					url:'https://www.zj.gov.cn/art/2024/2/29/art_1229017139_2513707.html',
					passages: ['第一段', '第二段']
				}, {
					title: '浙江推进农作物秸秆综合利用',
					type: 1,
					url:'http://www.china-nengyuan.com/exhibition/china-nengyuan_exhibition_news_93625.pdf',
					passages: ['第一段', '第二段']
				}, {
					title: '浙江省制定2024年农作物秸秆综合利用工作专项行动方案',
					type: 1,
					url:'http://www.zgjgxh.com/news/show.php?itemid=9630',
					passages: ['第一段', '第二段']
				}, {
					title: '浙江下决心攻坚秸秆综合利用',
					type: 1,
					url:'http://www.zj.xinhuanet.com/20240112/cde22402043d4f229e974f2e38bb0860/c.html',
					passages: ['第一段', '第二段']
				}, {
					title: '杭州多措并举探索秸秆回收创新模式',
					type: 2,
					url:'https://www.hangzhou.gov.cn/art/2023/12/15/art_812269_59090950.html',
					passages: ['第一段', '第二段']
				}, {
					title: '探索农作物秸秆综合利用新模式 杭州“秸”尽所能变“废”为宝',
					type: 2,
					url:'https://www.hzzx.gov.cn/cshz/content/2024-01/23/content_8678868.htm',
					passages: ['第一段', '第二段']
				},{
					title: '宁波市农业农村局关于印发《宁波市2024年农作物秸秆综合利用工作专项行动实施方案》的通知',
					type: 2,
					url:'http://nyncj.ningbo.gov.cn/art/2024/4/9/art_1229058290_58990068.html',
					passages: ['第一段', '第二段']
				},{
					title: '宁波市农业农村局关于做好秋收秸秆综合利用工作的通知',
					type: 2,
					url:'http://nyncj.ningbo.gov.cn/art/2022/11/22/art_1229058290_58984892.html',
					passages: ['第一段', '第二段']
				}],
				items: ['中央有关文件', '省政府有关文件', '地级市有关文件'],
				activePage: 0 ,// 用于跟踪当前激活的列表项索引 
			};
		},
		mounted() {

		},
		beforeDestroy() {
			// 在组件销毁前卸载Swiper  
				this.$refs.mySwiper.swiperInstance.destroy(true, true); // 第二个参数为true会重置swiper到初始状态，第三个参数为true会移除swiper内部的dom元素  
		},
		methods: {
			navigateTo(link) {
				console.log(111)
			    window.open(link,'_blank')
				},
			onSlideChange() {
				this.activePage = this.$refs.mySwiper.swiperInstance.activeIndex;
				console.log(this.activePage);
			},
			changeSwiper(e){
				this.$refs.mySwiper.swiperInstance.activeIndex = e;
				this.activePage = e;
			},
		}
	}
</script>

<style scoped>
.card{
	min-height: 80vh;
}
.card_title{
	border: none;
}
.swiper-slide img {
		width: 100%;
		height: 24vh;
		background-size: cover;
	}

.TopNav {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		border: 1px solid #ebebeb;
		background-color: #fff;
		margin: 0 auto;
	}

	.TopNav li {
		display: flex;
		flex-direction: column;
		position: relative;
		padding: 3vw;
		color: #333;
	}

	.TopNav li.select {
		border-bottom: 2px solid #fc9b39;
		font-weight: bold;
	}
	.swiper_slide_everycon{
		margin: 2vw;
		padding: 1vw;
		font-size: 28px;
		background: linear-gradient(to right,#ffb530,#fdd716);
		border-radius: 10px;
		color: #fff;
		padding: 2vw;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.swiper_slide_everycon a{
		color: white;
		font-weight: bold;
	}
	
</style>